<template>
  <div class="task-list-container">
    <CPageTable @register="registerPage" v-model:search-form="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="handleExport" v-btnPermission="'PCF_SUPPLIER_DATA_EXPORT'"
          ><CIcon type="c-xian-daochu" class="g-mr4"></CIcon>导出数据</el-button
        >
        <el-button type="primary" @click="handleManagement" v-btnPermission="'SUPPLIER_VIEW'"
          >管理供应商</el-button
        >
      </template>
      <template #codeSlot="{ scope }">
        {{ empty(scope.row.formNo) }}
      </template>
      <template #itemSlot="{ scope }">
        <CTableColumn :main-text="scope.row.partName" :sub-text="scope.row.partCode">
          <template #subText>
            <div class="g-flex">
              <p v-ellTooltip>
                {{ empty(scope.row.partCode) }}
              </p>
              <el-popover
                placement="bottom"
                width="300"
                v-if="scope.row.partSuitCode && scope.row.partSuitCode.length"
              >
                <template #reference>
                  <CIcon type="c-xian-gengduoxinxi" class="more-icon"></CIcon>
                </template>
                <div class="g-font-14n1 g-mb4">同类编码：</div>
                <div class="model-tag-wrap">
                  <div
                    class="model-tag"
                    v-for="(item, index) in scope.row.partSuitCode"
                    :key="index"
                    >{{ item }}</div
                  >
                </div>
              </el-popover>
            </div>
          </template>
        </CTableColumn>
      </template>
      <template #supplierNameSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.supplierName"
          :sub-text="scope.row.supplierCode"
        ></CTableColumn>
      </template>
      <template #contact="{ scope }">
        <CTableColumn
          :main-text="scope.row.contact"
          :sub-text="scope.row.contactPhone"
        ></CTableColumn>
      </template>
      <template #creatorSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.creator"
          :sub-text="scope.row.createTime"
        ></CTableColumn>
      </template>
      <template #formType="{ scope }">
        {{ FormTypeMap[scope.row.formType] }}
      </template>

      <template #createTime="{ scope }">
        <template v-if="scope.row.createTime">
          <p>{{ datjs(scope.row.createTime).format('YYYY-MM-DD') }}</p>
          <p>{{ datjs(scope.row.createTime).format('HH:mm:ss') }}</p>
        </template>
        <span v-else>-</span>
      </template>
      <template #updateTime="{ scope }">
        <template v-if="scope.row.updateTime">
          <p>{{ datjs(scope.row.updateTime).format('YYYY-MM-DD') }}</p>
          <p>{{ datjs(scope.row.updateTime).format('HH:mm:ss') }}</p>
        </template>
        <span v-else>-</span>
      </template>

      <template #statusSlot="{ scope }">
        <el-tag :type="renderTag(scope.row.status)">
          {{ SupplierFormStatusMap[scope.row.status] }}
        </el-tag>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
  </div>
</template>
<script lang="ts">
export default {
  name: 'SupplierData'
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { ISupplierListResult } from '@/apis/pcf/supplier/model/supplierList';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { useSupplierList } from './useSupplierList';
import { useRouter } from 'vue-router';
import { useKeepAliveRefresh } from '@/hooks/useKeepAliveRefresh';
import { empty } from '@/utils';
import { useMessage } from '@/hooks/useMessage';
import { getSupplierSummary, exportSupplierForm } from '@/apis/pcf/supplier/supplierList';
import { SupplierFormStatusMap, FormTypeMap, SupplierFormStatusEnum } from '@/constants/enum';
import { useExport } from '@/hooks/useExport';
import datjs from 'dayjs';
import { hasBtnPermission } from '@/directives/btnPermission';

const { handleExportFile } = useExport();

const { createConfirm } = useMessage();
const { searchForm, searchOptions, tableOptions, tableFieldsSetting } = useSupplierList();
const options = reactive<CPageTableProps>({
  title: '供应商数据集',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh, setProps }] = useCPageTable(options);
useKeepAliveRefresh(refresh);
const router = useRouter();

onMounted(async () => {
  try {
    let data = await getSupplierSummary();
    setProps({
      descText: `统计信息：合计 ${data.supplierCount || 0} 个供应商，${
        data.formCount || 0
      } 个数据表，其中待反馈 ${data.noCommitCount || 0} 条`
    });
  } catch {
    console.log('error');
  }
});
const handler = (row: ISupplierListResult) => {
  let type: string;
  if (
    row.status == SupplierFormStatusEnum.PASS ||
    row.status == SupplierFormStatusEnum.REJECT ||
    row.status == SupplierFormStatusEnum.CLOSED ||
    row.status == SupplierFormStatusEnum.UN_FEEDBACK
  ) {
    type = 'PROCESSED';
  } else {
    type = 'PENDING';
  }
  router.push(`/supplierData/detail?type=${type}&id=${row.processInstanceId}`);
};
const handleManagement = () => {
  router.push('/system/organizationUser/supplier');
};
/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: ISupplierListResult): TableButtonItem[] {
  let text: string;
  switch (row.status) {
    case SupplierFormStatusEnum.AUDIT:
      text = '去审核';
      break;
    case SupplierFormStatusEnum.PASS:
    case SupplierFormStatusEnum.CLOSED:
    case SupplierFormStatusEnum.UN_FEEDBACK:
    case SupplierFormStatusEnum.REJECT:
      text = '查看';
      break;
    default:
      text = '去处理';
      break;
  }
  return [
    {
      text,
      btnPermission:
        row.status == SupplierFormStatusEnum.AUDIT
          ? 'PCF_SUPPLIER_DATA_AUDIT'
          : 'PCF_SUPPLIER_DATA_QUERY',
      onClick: () => handler(row)
    }
  ];
}

const renderTag = (status: string) => {
  switch (status) {
    case SupplierFormStatusEnum.PASS:
      return 'success';
    case SupplierFormStatusEnum.UN_SUBMITTED:
    case SupplierFormStatusEnum.AUDIT:
      return 'warning';
    case SupplierFormStatusEnum.UN_FEEDBACK:
      return '';
    case SupplierFormStatusEnum.REJECT:
      return 'danger';
    default:
      return 'info';
  }
};

const handleExport = () => {
  const params = {
    status: searchForm?.status,
    supplierName: searchForm?.supplierName,
    formType: searchForm?.formType,
    dataYear: searchForm?.dataYear,
    codeOrPartName: searchForm?.codeOrPartName
  };
  handleExportFile(exportSupplierForm, params);
};
</script>

<style lang="scss" scoped>
.model-tag {
  min-width: 36px;
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  text-align: center;
  background: #eef1f5;
  border-radius: 3px;
  font-size: 12px;
  color: #5a739a;
  margin-bottom: 4px;
  margin-right: 4px;
}
.model-tag-wrap {
  display: flex;
  flex-wrap: wrap;
}
.more-icon {
  margin-left: 4px;
  font-size: 12px;
  color: #96a7b3;
  cursor: pointer;
}
</style>
